<template>
    <web-header :show="isHome" />

    <div class="nav_a center_c">
        <div class="left"> 当前位置：
            <router-link to="/">环球行</router-link> &gt;
            <router-link to="/area/">目的地</router-link> &gt;
            <template v-if="detail.nationality == 1">
                <router-link to="/outbound">出境游</router-link> &gt;
            </template>
            <template v-else>
                <router-link to="/domestic">国内游</router-link> &gt;
            </template>
            <!-- <span>{{ detail.city }}旅游</span> &gt; -->
            <span>产品详情</span>
        </div>
        <div>
            <!-- <volist name="areas" id="rs"><a href="/line/{$rs.id}/">{$rs.title}</a></volist> -->
            <!-- 右边旅游推荐 /line/  -->
            <!-- <a href="">湖南</a> -->
        </div>
    </div>
    <input type="hidden" value="{$row.line_type}" id="line_type" />
    <div class="box_a center_c">
        <div class="box">
            <!-- 左侧 -->
            <div class="lefta">
                <!-- 轮播图 -->
                <div class="pics">

                    <div class="swiper-box">
                        <swiper class="swiper mySwiper2" :spaceBetween="10" :thumbs="{ swiper: thumbsSwiper }"
                            :modules="modules" :loop="true" :autoplay="true" :navigation="true">
                            <swiper-slide v-for="(item, index) of bannerList" :key="index">
                                <img class="img" :src="item" />
                            </swiper-slide>
                        </swiper>
                        <swiper @swiper="setThumbsSwiper" :spaceBetween="10" class="swiper mySwiper" :slidesPerView="4"
                            :watchSlidesProgress="true" :modules="modules" :autoplay="true" :loop="true">
                            <swiper-slide v-for="(item, index) of bannerList" :key="index">
                                <img class="img" :src="item" />
                            </swiper-slide>
                        </swiper>
                    </div>


                    <!-- 右上角分类 line_type -->
                    <div class="linetype">
                        <img :src="lineTypeImg">
                    </div>
                </div>
                <!-- 日历 -->
                <!-- axios_line_Dates -->
                <div class="dates" id="calendar" style="transform: scale(1); width: 520px;">
                    <el-calendar v-model="value">
                        <template #date-cell="{ data }">
                            <div v-if="tour_list[data.day]" @click="changeCalendar(tour_list[data.day])">
                                <p :class="data.isSelected ? 'is-selected calendar-center' : 'calendar-center'">
                                    {{ data.day.split('-').slice(2).join('-') }}
                                    <!-- {{data.day}} -->
                                    <!-- data.day 为日期年月日 -->
                                    <!-- {{data.isSelected}} -->
                                </p>
                                <p class="calendar-center" style="color:red;font-size: 10px;">
                                    ￥{{ tour_list[data.day].price_a }}
                                </p>
                            </div>
                            <div v-else>
                                <p :class="data.isSelected ? 'is-selected calendar-center' : 'calendar-center'">
                                    {{ data.day.split('-').slice(2).join('-') }}
                                </p>
                            </div>
                        </template>
                    </el-calendar>
                </div>

            </div>
            <div class="leftb">
                <dl class="titlea">
                    <dt>{{ detail.title }}</dt>
                    <dd>
                        <!-- <div name="taobao_sub_titles">
                            暂无数据
                            <ul class="sub_title">
                                    <volist name="taobao_sub_titles" id="rs">
                                        <li>{$rs}</li>
                                    </volist>
                                </ul>
                                <else />
                                <ul class="sub_title">
                                    <li>{$row.intro|mb_substr=0,60,'utf-8'}</li>
                                </ul>
                        </div> -->
                        <ul class="sub_title">
                            <li v-for="(rs, i) in detail.infos2" :key="i">{{ rs }}</li>
                        </ul>
                        <strong style="padding-top:10px; display:block;">商品编号：【{{ detail.id }}】</strong>
                    </dd>
                </dl>
                <dl class="price">
                    <dt>
                        <!-- 春日温暖“花漾游”【赏花、春游、温泉、美食等】全新闪亮入驻！ -->
                        <!-- 夏日倾情“清新游”【阳光、沙滩、海浪、冰饮等】闪亮上线！ -->
                        【遍山红叶舞秋色，漫地硕果展天颜】 与君相约秋天的绚丽多姿！
                        <!-- 冬季浪漫“畅冬游”【滑雪、红叶、雪景、泡温泉等】全新闪亮入驻！ -->

                    </dt>
                    <dd>￥<strong id="price">{{ tour_item.price_a || tour_item.price || detail.price }}</strong>元</dd>
                    <!-- <input type="hidden" id="price_hidden" :value="detail.price" /> -->
                </dl>

                <section class="rightbox">
                    <div class="titles">行程天数：</div>
                    <div class="text"> {{ detail.line_days }}</div>
                </section>
                <section class="rightbox">
                    <div class="titles">月浏览量：</div>
                    <div class="text">{{ detail.clicks }} </div>
                </section>
                <section class="rightbox">
                    <div class="titles">收藏人数：</div>
                    <div class="text">{{ detail.likes }} </div>
                </section>
                <section class="rightbox">
                    <div class="titles">目 的 地 ：</div>
                    <div class="text">
                        <router-link v-for="rs in detail.areaArray" :key="rs.id" :to="`/line/${rs.id}`"
                            class="area-hover">{{ rs.title }}</router-link>
                    </div>
                </section>

                <section class="rightbox mb8">
                    <div class="titles">出发城市：</div>
                    <div class="package" id="citys">
                        <a @click="cityChange(item)" v-for="(item, index) in citys" :key="index"
                            :class="item.city == city_Show.city ? 'active' : ''" href="javascript:void(0)">
                            {{ item.city }}
                        </a>

                    </div>
                </section>
                <!-- 团队价格 -->
                <section class="rightbox mb8">
                    <div class="titles">套餐类型：</div>
                    <div class="package" id="package">
                        <a @click="mealChange(item)" v-for="(item, index) in meal" :key="item.id"
                            :class="mealShow == item.id ? 'active' : ''" href="javascript:void(0)">
                            {{ item.title }}
                        </a>
                    </div>
                </section>
                <!-- 定制团人数选择 -->
                <section v-if="detail.line_type && detail.line_type.id == 2" class="rightbox mb8 meal-list">
                    <div class="titles">成团人数：</div>
                    <div class="package" id="package">
                        <div v-for="(item, index) in tourDate" :key="item.id">
                            <a @click="customizationChange(item)" :class="boxShow == item.id ? 'active' : ''"
                                href="javascript:void(0)">
                                <span class="cus-num">
                                    {{ item.nums }}人团
                                </span>
                                <span class="" style="padding: 4rpx 0;color: #FF5454;text-align: center;">
                                    <span style="font-size: 18rpx;">￥</span>
                                    <span style="font-size: 28rpx;">{{ item.price }}</span>
                                </span>
                            </a>
                        </div>
                    </div>
                </section>

                <!-- 团队价格 -->

                <!--<section class="rightbox">
                <div class="titles">包团人数：</div>
                <div class="package" id="peoples">
                    <a href="javascript:void(0)" name="1">小于20人</a>
                    <a href="javascript:void(0)" name="2">20-50人</a>
                    <a href="javascript:void(0)" name="3">50-100人</a>
                    <a href="javascript:void(0)" name="4">大于100人</a>
                </div>
            </section>-->


                <!-- <notempty name="traffic">
                        <section class="rightbox mb8">
                            <div class="titles">联运价格：暂无数据</div>
                            <div class="traffic">
                                <select name="">
                                    <volist name="traffic" id="rs">
                                        <option value="{$rs[1]}">{$rs[0]} ￥{$rs[1]}元/人</option>
                                    </volist>
                                </select>
                            </div> 
                        </section>
                    </notempty> -->
                <dl class="button">
                    <dt><a id="btn-custom-size" href="javascript:void(0)" @click="selectOpen">立即预订</a></dt>
                    <dd><a @click="service" href="javascript:void(0)">在线咨询</a>
                    </dd>
                </dl>
                <div id="custom-size-dialogBox"></div>
                <p>商品包含：</p>
                <!-- 判断是否包含机票酒店等 动态增加 active  -->
                <ul class="bh">
                    <li :class="true ? 'active' : ''">
                        <img src="https://admin.hqx.com.cn/Public/Travel/images/free/c_03.png" width="47" height="42">
                    </li>
                    <li class="active">
                        <img src="https://admin.hqx.com.cn/Public/Travel/images/free/c_06.png" width="47" height="42">
                    </li>
                    <li class="active">
                        <img src="https://admin.hqx.com.cn/Public/Travel/images/free/c_08.png" width="47" height="42">
                    </li>
                    <li>
                        <img src="https://admin.hqx.com.cn/Public/Travel/images/free/c_10.png" width="47" height="42">
                    </li>
                    <li class="active">
                        <img src="https://admin.hqx.com.cn/Public/Travel/images/free/c_12.png" width="47" height="42">
                    </li>
                    <li>
                        <img src="https://admin.hqx.com.cn/Public/Travel/images/free/c_14.png" width="47" height="42">
                    </li>
                    <li class="active">
                        <img src="https://admin.hqx.com.cn/Public/Travel/images/free/c_16.png" width="47" height="42">
                    </li>
                </ul>
                <p>预约商品购买提示：</p> 1.购买时无需选择出游日期<br> 2.该商品于10:00开始预约，请点击前台客服按钮发起预约<br>
                3.为了您的顺利出行，请至少提前七天预约出游

            </div>
            <div class="right">
                <div class="top">...您可能还喜欢...</div>
                <ul>
                    <!-- 附近商品列表 -->
                    <li v-for="(rs, index) in correlationList" :key="rs.id">
                        <router-link :to="'/details/' + rs.id"><img class="img"
                                :src="rs.picture || rs.pic"></router-link>
                        <h3 class="ellipsis"><router-link :to="'/details/' + rs.id">{{ rs.title }}</router-link></h3>
                        <span>￥{{ rs.price }}元/人起</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 底部推荐 -->
    <div class="box_b center_c">
        <div class="" style="display: flex; justify-content: space-between;">
            <aside>
                <!-- <div class="box_c">
                    <div class="top">当季特价</div>
                    <div class="bottom">
                        <dl v-for="(rs, index) in specialOfferList" :key="rs.id">
                            <dt><router-link :to="'/details/' + rs.id"><img class="img" :src="rs.pic"></router-link>
                            </dt>
                            <dd><router-link :to="'/details/' + rs.id">{{ rs.title }}</router-link></dd>
                        </dl>
                    </div>
                </div> -->

                <div class="box_new" v-if="specialOfferList.length != 0" style="margin-bottom: 15px;">
                    <div class="box-new-name">
                        <span class="iconfont icon-xiangguantuijian"
                            style="font-size: 14px; margin-bottom: -2px; color:#ff8811;"></span>
                        相关推荐
                    </div>
                    <div class="box_new-list">
                        <div v-for="(item, index) in specialOfferList" :key="item.id">
                            <router-link v-if="index < specialOfferList.length" :to="`/details/${item.id}`">
                                <img :src="item.picture || item.pic" alt="" class="box-new-img">
                                <div class="box-new-title clamp-line-1" style="height: 20px;">{{ item.title }}</div>
                                <div class="box-new-price">
                                    ￥{{ item.price }}<span class="price-two">起</span>
                                </div>
                            </router-link>
                        </div>
                    </div>
                </div>
                <div id="left3"></div>
                <el-affix target=".box_b" :offset="140" z-index="11">

                    <!-- <div class="sticky-element">
                        <div class="box_c left3 ">
                            <div class="top">热门推荐</div>
                            <div class="bottom">
                                <dl v-for="(rs, index) in leadingList" :key="rs.id">
                                    <dt><router-link :to="'/details/' + rs.id"><img class="img"
                                                :src="rs.pic"></router-link>
                                    </dt>
                                    <dd><router-link :to="'/details/' + rs.id">{{ rs.title }}</router-link></dd>
                                </dl>
                            </div>
                        </div>
                    </div> -->
                    

                    <div class="box_new" v-if="leadingList.length != 0">
                        <div class="box-new-name">
                            <span class="iconfont icon-edu-rementuijian"></span>
                            热门推荐
                        </div>
                        <div class="box_new-list">
                            <div v-for="(item, index) in leadingList" :key="item.id">
                                <router-link v-if="index < leadingList.length" :to="`/details/${item.id}`">
                                    <img :src="item.picture || item.pic" alt="" class="box-new-img">
                                    <div class="box-new-title clamp-line-1" style="height: 20px;">{{ item.title }}</div>
                                    <div class="box-new-price">
                                        ￥{{ item.price }}<span class="price-two">起</span>
                                    </div>
                                </router-link>
                            </div>
                        </div>
                    </div>

                </el-affix>


            </aside>



            <div class="left">
                <div id="top"></div>
                <!-- 右边固定盗汗栏 -->

                <div class="top " id="top1">
                    <ul class="nav_b">
                        <div name="days_list">
                            <!-- <li class="active"> -->
                            <li>
                                <a @click="goToTarget('area1')" href="javascript:void(0)">线路详情</a>
                            </li>
                            <li v-if="days.length != 0"><a @click="goToTarget('area2')"
                                    href="javascript:void(0)">行程介绍</a>
                            </li>
                            <li v-if="detail.linePro"><a @click="goToTarget('area3')" href="javascript:void(0)">费用说明</a>
                            </li>
                            <li v-if="detail.linePro"><a @click="goToTarget('area5')" href="javascript:void(0)">温馨提示</a>
                            </li>
                            <li><a @click="goToTarget('area6')" href="javascript:void(0)">小编力荐</a></li>
                        </div>
                    </ul>
                </div>
                <div class="center">

                    <div class="df" style="justify-content: space-between;">
                        <!-- 详情图 -->
                        <div class="boxa" id="area1" style="width: 790px;">
                            <div v-for="(item, index) in contentImgs" :key="index" style="font-size: 0;">
                                <img :src="item" mode="widthFix" style="width: 100%"></img>
                            </div>
                        </div>
                        <!-- 右侧导航栏 -->

                        <div>
                            <el-affix target=".center" :offset="140" z-index="11">
                                <div class="right_nav sticky-element" style="z-index: 1; background-color: #fff; ">
                                    <div id="left2"></div>
                                    <div class="box left_2" id="left2">
                                        <div class="end_o"></div>
                                        <dl>
                                            <dt><a @click="goToTarget('area1')" href="javascript:void(0)">线路详情</a></dt>
                                        </dl>
                                        <dl v-if="days.length != 0">
                                            <dt><a @click="goToTarget('area2')" href="javascript:void(0)">行程介绍</a></dt>
                                            <dd v-for="(rs, index) in days" :key="index">
                                                <a @click="goToTarget(`day${index}`)" href="javascript:void(0)">第{{
                                                    index +
                                                    1 }}天</a>
                                            </dd>
                                        </dl>
                                        <dl v-if="detail.linePro">
                                            <dt><a @click="goToTarget('area3')" href="javascript:void(0)">费用说明</a></dt>
                                        </dl>
                                        <dl v-if="detail.linePro">
                                            <dt><a @click="goToTarget('area5')" href="javascript:void(0)">温馨提示</a></dt>
                                        </dl>
                                        <dl>
                                            <dt><a @click="goToTarget('area6')" href="javascript:void(0)">小编推荐</a></dt>
                                        </dl>
                                        <div class="end_o"></div>
                                        <!-- <ul>
                            <li><a href="javascript:history.go(-1)"><img
                                        src="https://admin.hqx.com.cn/Public/Travel/images/line/k_18.png" width="45"
                                        height="45"></a>
                            </li>
                            <li><a href="#"><img src="https://admin.hqx.com.cn/Public/Travel/images/line/k_21.png"
                                        width="45" height="45"></a>
                            </li>
                        </ul> -->
                                    </div>
                                </div>
                            </el-affix>
                        </div>
                    </div>


                    <!-- 行程介绍 -->
                    <div v-if="days.length != 0" class="route-introduce" id="area2">
                        <h2>行程介绍</h2>
                        <div class="day-introduce">
                            <div v-for="(rs, index) in days" :key="rs.id" :id="`day${index}`" class="day-box">
                                <div class="day-title" :style="{ paddingTop: index == 0 ? '0px' : '30px' }">
                                    <div class="day-title-name">{{ rs.title }}</div>
                                    <div class="day-title-line left-tip" :style="{ top: index == 0 ? '0px' : '30px' }">
                                        <p class="day-english">Day</p>
                                        <p class="day-num">{{ dayText(index + 1) }}</p>
                                    </div>
                                </div>
                                <div class="days-item" v-for="(item) in rs.daysinfo" :key="item.id">
                                    <div class="days-item-title">{{ item.title }}</div>
                                    <div class="days-item-text">
                                        <div v-html="collapseBrTags(item.text)"></div>
                                        <!-- {{ item.text }} -->
                                    </div>
                                    <div v-for="(j) in item.jdboxs" :key="j.id" class="jdbox">
                                        <div class="jdboxs-title">
                                            {{ j.title }}
                                        </div>-
                                        <div class="days-item-imgs">
                                            <img v-for="(j2, index3) in j.pics" :key="index3" :src="j2" alt=""></img>
                                        </div>
                                    </div>



                                    <div class="left-tip">
                                        <img :src="`https://admin.hqx.com.cn/Public/App/image/${item.type}.png`" alt=""
                                            class="left-tip-img">

                                        <div class="left-tip-text">{{ item.time }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <!-- <div v-if="days.length != 0" class="daybox">
                        <h1>行程介绍</h1>
                        <div id="day1">
                            <div v-for="(rs, key) in days" :key="key" class="day" :id="`days${key + 1}`">
                                <section class="day1list">
                                    <div class="listimg"> D{{ key + 1 }}</div>
                                    <div class="gao">
                                        <h2>第{{ key + 1 }}天&nbsp;{{ rs.title }}</h2>
                                    </div>
                                </section>
                                <section class="day1air">
                                    <div class="gao">
                                        <div v-html="rs.intro_pc"></div>
                                    </div>
                                </section>
                                <section class="day1food">
                                    <div class="listimg1"><img
                                            src="https://admin.hqx.com.cn/Public/Static/images/line/food_icon.png">
                                    </div>
                                    <div class="gao">
                                        <p>
                                            [ 早餐：{{ rs.breakfast }} ]&nbsp;
                                            [ 中餐：{{ rs.lunch }} ]&nbsp;
                                            [ 晚餐：{{ rs.dinner }}]&nbsp;
                                        </p>
                                    </div>
                                </section>
                                <section class="day1hotel">
                                    <div class="listimg1"><img
                                            src="https://admin.hqx.com.cn/Public/Static/images/line/hotel_icon.png">
                                    </div>
                                    <div class="gao">
                                        <p>[ 住宿：{{ rs.sleep }} ]</p>
                                    </div>
                                </section>
                            </div>
                        </div>
                    </div> -->


                    <!-- <notempty name="days_list">
                            <div class="daybox">
                                <h1>行程介绍</h1>
                                <div id="day1">
                                    <volist name="days_list" id="rs">
                                        <div class="day" id="days{$key+1}">
                                            <section class="day1list">
                                                <div class="listimg"> D{$key+1}</div>
                                                <div class="gao">
                                                    <h2>第{$key+1}天&nbsp;{$rs.title}</h2>
                                                </div>
                                            </section>
                                            <section class="day1air">
                                                <div class="gao">
                                                    <p>{$rs.intro}</p>
                                                    <div class="imgbox">
                                                        <volist name="rs['pics']" id="rs2"><img
                                                                src="https://admin.hqx.com.cn/Public/Uploads/{$rs2}"
                                                                width="170" height="110"></volist>
                                                    </div>
                                                </div>
                                            </section>
                                            <volist name="rs['dayscenics']" id="sc">
                                                <section class="day1air">
                                                    <div class="listimg1"><img
                                                            src="https://admin.hqx.com.cn/Public/Static/images/line/daysc_{$sc['type']}.png">
                                                    </div>
                                                    <div class="gao">
                                                        <p><b>{$sc.title}</b></p>
                                                        <p>{$sc.intro}</p>
                                                        <div class="imgbox">
                                                            <volist name="sc['images']" id="pics"><img
                                                                    src="https://admin.hqx.com.cn/Public/Uploads/{$pics}"
                                                                    width="170" height="110"></volist>
                                                        </div>
                                                    </div>
                                                </section>
                                            </volist>
                                            <section class="day1food">
                                                <div class="listimg1"><img
                                                        src="https://admin.hqx.com.cn/Public/Static/images/line/food_icon.png">
                                                </div>
                                                <div class="gao">
                                                    <p>[ 早餐：{$rs.breakfast} ]&nbsp;[ 中餐：{$rs.lunch} ]&nbsp;[
                                                        晚餐：{$rs.dinner}]&nbsp;</p>
                                                </div>
                                            </section>
                                            <section class="day1hotel">
                                                <div class="listimg1"><img
                                                        src="https://admin.hqx.com.cn/Public/Static/images/line/hotel_icon.png">
                                                </div>
                                                <div class="gao">
                                                    <p>[ 住宿：{$rs.sleep|mb_substr=0,30,'utf-8'} ]</p>
                                                </div>
                                            </section>
                                        </div>
                                    </volist>
                                </div>
                            </div>
                        </notempty> -->




                    <!-- 判断是否有提示内容 -->
                    <template v-if="detail.linePro">
                        <div class="title_a" id="area3" style="display: none">
                            <div class="box">
                                <span>费用<br /> 说明</span>
                            </div>
                        </div>
                        <div class="boxd">
                            <div class="sublist">
                                <h3>
                                    <div class="title">费用包含</div>
                                </h3>
                                <div v-html="detail.linePro ? detail.linePro.line_ncontain : ''" />
                                <h3>
                                    <div class="title2">费用不含</div>
                                </h3>
                                <div v-html="detail.linePro ? detail.linePro.line_ncontain : ''" />
                                <p><br>
                                </p>
                            </div>
                        </div>
                    </template>
                    <!-- <template v-if="detail.linePro">
                        <div class="title_a" id="area4">
                            <div class="box">
                                <span>签证<br /> 须知</span>
                            </div>
                        </div>
                        <div class="boxd">
                            <div class="sublist"> 
                                {$row.TravelLine.line_visa}
                                <div v-html="detail.linePro ? detail.linePro.line_visa : ''" />

                            </div>
                        </div>
                    </template> -->
                    <template v-if="detail.linePro">
                        <div class="title_a" id="area5">
                            <div class="box">
                                <span>温馨 <br /> 提示</span>
                            </div>
                        </div>
                        <div class="boxd">
                            <div class="sublist">
                                <view v-html="detail.linePro ? detail.linePro.line_prompt : ''" />
                            </div>
                        </div>
                    </template>


                    <div class="title_a" id="area6">
                        <div class="box">
                            <span>小编<br /> 推荐</span>
                        </div>
                    </div>
                    <div class="boxc">
                        <div class="list">
                            <template v-for="(rs, index) in circumList">
                                <section :key="rs.id" v-if="index < 3">
                                    <div class="box">
                                        <div class="pic">
                                            <img class="img" :src="rs.picture || rs.pic">
                                            <router-link :to="'/details/' + rs.id" class="link"></router-link>
                                            <!-- <a href="javascript:void(0)" class="cat">加入购物车</a> -->
                                        </div>
                                        <dl class="text clamp-line-1">
                                            <dt>
                                                <router-link :to="'/details/' + rs.id">
                                                    {{ rs.title }}
                                                </router-link>
                                            </dt>
                                            <!-- <dd style="height:40px;">
                                                {{ rs.intro ? rs.intro : rs.mb_substr }}
                                            </dd> -->
                                        </dl>
                                        <div class="price">
                                            <!-- <span>市场价：￥{{ rs.mark_price }}</span> -->
                                            <strong style="padding:0">￥{{ rs.price }}元/人起</strong>
                                        </div>
                                        <!-- <dl class="button">
                                            <dt><router-link :to="'/details/' + rs.id">立即抢购</router-link></dt>
                                            <dd>销量：{{ rs.clicks }}件</dd>
                                        </dl> -->
                                    </div>
                                </section>
                            </template>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <web-footer />
    <back-top />
    <!-- <popup-consult ref="RefChild"></popup-consult> -->
    <popup-customization ref="RefChild"></popup-customization>

    <!-- 回到顶部 -->
    <!-- <el-backtop :right="100" :bottom="100" /> -->
</template>

<script setup>


import { ref, onMounted, computed, watch, onBeforeMount, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import { line_items, line_details, line_Packages, line_Dates, line_packages_groups, line_Days, getListOther, sendCopc } from "@/api/travel";
// 轮播图插件
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/thumbs";
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Thumbs, Navigation, Autoplay, Zoom, FreeMode } from "swiper/modules";
const modules = [Thumbs, Navigation, Autoplay, Zoom, FreeMode]; //必须要在这里面引入，只在组件定义的属性不生效，前面这里面没有定义autoPlay导致我的组件轮播不了，一度以为是swiper没有支持缩略图轮播


const route = useRoute();
let fullPath = route.fullPath;
let routeDate = route.query.id || route.params.id;

let detail = ref({});       // 详情
let content = ref('');      // 首次加载详情图片
let bannerList = ref([]);   // 轮播
let citys = ref({});        // 出发城市
let meal = ref([]);         // 套餐
let tourDate = ref([]);     // 团期
let tour_list = ref({});// 当前套餐所有团期
let tour_item = ref({});    // 当前团期
let navShow = ref(1);       // 顶部导航
let city_Show = ref({});    // 当前出发城市
let mealShow = ref(null);   // 套餐id
let monthsShow = ref(0);    // 月份
let boxShow = ref(null);    // 团期
let days = ref([]);         // 详细行程
let scrollIndex = ref(null);// 滚动条
let isHome = ref('');       // 导航栏显示国内还是国外
const value = ref(new Date());// 日历时间

// 轮播图
const thumbsSwiper = ref(null);
const setThumbsSwiper = (swiper) => {
    thumbsSwiper.value = swiper;
};

let correlationList = ref([]) // 相关产品
let specialOfferList = ref([]) // 特价产品
let leadingList = ref([]) // 主推产品
let circumList = ref([]) // 周边产品

// 获取子组件的引用
const RefChild = ref();

const selectOpen = () => {
    if (RefChild.value) {
        RefChild.value.open();
    }
}

let service = async () => {
    await sendCopc();
    // 跳转在线客服
    window.open("https://www31c1.53kf.com/webCompany.php?arg=9005376&kf_sign=jUwNDMTczMczMTE2NTEwNDMwNDU0MDAzNzAwMDEyNzU%253D&style=2", "_blank");
}


const init = async () => {
    fullPath = route.fullPath; // 保存当前路径
    routeDate = route.query.id || route.params.id;
    // 发起请求获取数据
    await axios_line_details();
    // 获取套餐列表
    await axios_line_Packages();

    // 判断是否为定制团
    if (detail.value.line_type.id != 2) {
        await axios_line_Dates(mealShow.value); //团期列表
    } else {
        await axios_line_packages_groups(mealShow.value); //团体价格列表 20人 / 50人 ...
    }

    axios_line_Days(routeDate) // 行程安排
    // 多个列表
    correlationList.value = (await getListOther({ areas: detail.value.areas, limit: 5, type: '' })).data;    // 相关产品
    specialOfferList.value = (await getListOther({ areas: detail.value.areas, limit: 5, type: 1 })).data;   // 特价产品
    leadingList.value = (await getListOther({ areas: detail.value.areas, limit: 5, type: 2 })).data;        // 主推产品
    circumList.value = (await getListOther({ areas: detail.value.areas, limit: 5, type: 3 })).data;         // 周边产品
};

// 获取商品详情
let axios_line_details = async () => {
    let res = await line_details({ id: routeDate })
    res.data.areas = res.data.areas.replace(/^,|,$/g, '');
    detail.value = res.data; 9
    // 轮播
    bannerList.value = [...new Set(res.data.bannerArray)];
    // 国内外
    // isHome.value = res.data.fid
    document.title = res.data.title;
    content.value = res.data.content;
}

// 获取套餐列表
let axios_line_Packages = async () => {
    let theme = await line_Packages({ id: routeDate });
    let arr = theme.data;
    citys.value = arr.reduce((prev, item) => {
        let existingItem = prev.find(itemChild => itemChild.city === item.city);

        if (existingItem) {
            // 如果找到具有相同city的项，则合并package  
            existingItem.package = [...existingItem.package, ...item.package];
        } else {
            // 如果没有找到具有相同city的项，则将当前项添加到累加器中  
            prev.push(item);
        }
        return prev;
    }, []);
    city_Show.value = theme.data[0];
    meal.value = city_Show.value.package;
    mealShow.value = meal.value[0].id;
}

// 团期列表
let axios_line_Dates = async (id) => {
    let res = await line_Dates({
        id
    })
    tourDate.value = res.data.dateArray;
    // 判断详情图切换
    if (res.data.package.content) {
        detail.value.content = res.data.package.content;
    }
    tour_list.value = {};
    for (const key in tourDate.value) {
        if (tourDate.value.hasOwnProperty(key)) {
            tourDate.value[key].dates.forEach(item => {
                tour_list.value[item.start_date] = item;
            });
        }
    }

    if (tourDate.value.length == 0) return; // 说明所有团期已过期
    boxShow.value = tourDate.value[0]?.dates[0]?.id;
    monthsShow.value = tourDate.value[0]?.title;
    tour_item.value = tourDate.value[0]?.dates[0] || {};
};

// 日历选择事件
const changeCalendar = (obj) => {
    // console.log('obj',obj)
}


// 团体价格列表
let axios_line_packages_groups = async (id) => {
    let res = await line_packages_groups({
        id
    })
    if (res.data.length == 0) return;
    res.data.reverse();
    tourDate.value = res.data.sort((a, b) => a.nums - b.nums).map((item, index) => {
        let min_num = 1;
        if (index != 0) {
            min_num = res.data[index - 1].nums + 1;
        }
        return {
            ...item,
            min_num,
            max_num: item.nums
        }
    })
    tourDate.value.reverse();
    boxShow.value = tourDate.value[0].id;
    monthsShow.value = tourDate.value[0].title;
    tour_item.value = tourDate.value[0] || {};
};

// 行程详情
let axios_line_Days = async (pid) => {
    let res = await line_Days({
        pid
    })
    res.data.forEach(item => {
        item.daysinfo.forEach(item2 => {
            if (item2.jdboxs) {
                item2.jdboxs = item2.jdboxs.filter(i => i != "" && i != 'undefined' && i != null && i != 'null');
                item2.jdboxs.forEach(rs => {
                    let pics = rs.pics ? rs.pics : rs.images;
                    if (pics) {
                        if (pics.length == 0) {
                            rs.pics = [];
                            return;
                        };
                        // |号分割 清空空值
                        let imgs = pics.split("|").filter(rs2 => rs2 != "" && rs2 != 'undefined');
                        rs.pics = imgs.map(m => {
                            return "https://admin.hqx.com.cn/Public/Uploads/" + m;
                        })
                    }
                })
            }
        })
    })
    days.value = res.data;

};

let cityChange = async (item) => {
    if (item.city == city_Show.value.city) {
        return;
    };

    // 修改展示的套餐

    city_Show.value = item;
    meal.value = city_Show.value.package;
    mealShow.value = meal.value[0].id;
    // 重新请求团期和参团用户
    await axios_line_Dates(mealShow.value); //团期列表
};

// 套餐切换
let mealChange = async (item) => {
    if (mealShow.value == item.id) return;
    detail.value.content = item.content ? item.content : content.value;
    // 判断是定制团还是跟团/当地游
    if (detail.value.line_type.id != 2) {
        // 切换团期
        await axios_line_Dates(item.id);
        mealShow.value = item.id;
    } else {
        await axios_line_packages_groups(item.id); //团期列表
        mealShow.value = item.id;
    }
};


// 团期月份切换
let monthChange = (id) => {
    scrollIndex.value = 'a' + id;
    monthsShow.value = id;
};

// 团期切换
let tourDateChange = async (dates, id, index) => {
    if (boxShow.value == dates.id) return;
    boxShow.value = dates.id;
    tour_item.value = dates;
};

// 定制团切换
let customizationChange = (item) => {
    if (boxShow.value == item.id) return;
    boxShow.value = item.id;
    tour_item.value = item;
};

// 将连续的<br>标签替换为单个<br>
function collapseBrTags(html) {
    // 1 删除所有 <a> 标签（保留内容）
    let result = html
        .replace(/<a\b[^>]*>/gi, '')   // 移除开标签（含属性）
        .replace(/<\/a>/gi, '');        // 移除闭标签

    // 2. 标准化并合并连续的 <br> 标签
    result = result
        // 统一所有 <br> 变体为 <br> 并移除后面空格
        .replace(/<br\s*\/?>\s*/gi, '<br>')
        // 合并连续的 <br> 为单个
        .replace(/(<br>)+/gi, '<br>')
        // 将所有的换行符(\n)替换为<br>
        .replace(/\\n/g, '<br>');



    return result;
}




onMounted(async () => {
    await init();

});

onBeforeMount(() => {
    window.scrollTo(0, 0);
})

const dayText = (text) => {
    return text < 10 ? '0' + text : text;
}

// 详情图数组
const contentImgs = computed(() => {
    // 正则获取图片路径
    const regex = /src="([^"]+)"/g;
    let match;
    const imgPaths = [];
    while ((match = regex.exec(detail.value.content)) !== null) {
        imgPaths.push(match[1]);
    }
    return imgPaths;
})

// 轮播图右侧栏 
const lineTypeImg = computed(() => {
    let imgPaths = "https://admin.hqx.com.cn/Public/Home/images/line/baotuanyou.gif";
    if (detail.value.line_type) {
        switch (detail.value.line_type.id) {
            case 1:
                imgPaths = "https://admin.hqx.com.cn/Public/Home/images/line/gentuanyou.gif";
                break;
            case 2:
                imgPaths = "https://admin.hqx.com.cn/Public/Home/images/line/zizhuyou.gif";
                break;
            case 4:
                imgPaths = "https://admin.hqx.com.cn/Public/Home/images/line/baotuanyou.gif";
                break;
        }
    }
    return imgPaths;
})

// 定位跳转 
const goToTarget = (element) => {
    const targetElement = document.getElementById(element);
    // console.log(targetElement.offsetTop)
    if (targetElement) {
        window.scrollTo({
            top: targetElement.offsetTop,
            behavior: 'smooth'
        });
    }
}

</script>

<style lang="scss" scoped>
@import "../../css/main_line.css";
</style>
